import React from 'react'
import clsx from 'clsx'
import styles from './styles.module.css'
import Link from '@docusaurus/Link'
import Translate from '@docusaurus/Translate'
import 'animate.css/animate.min.css'

const items = [
  {
    id: 1,
    title: (
      <Translate
        id="component.home.FeatureLeft.features.1"
        description="First feature of Mobile edition">
        Currently, PolyOS Mobile operates on the qemu-riscv64
        virtualization platform as its hardware foundation.
      </Translate>
    ),
  },
  {
    id: 2,
    title: (
      <Translate
        id="component.home.FeatureLeft.features.2"
        description="The second feature of Mobile Edition">
        PolyOS Mobile extends an OpenHarmony reference porting
        implementation to RISC-V hardware manufacturers and
        developers.
      </Translate>
    ),
  },
  {
    id: 3,
    title: (
      <Translate
        id="component.home.FeatureLeft.features.3"
        description="The third feature of Mobile edition">
        PolyOS Mobile serves to alleviate the complexity of porting
        OpenHarmony applications to RISC-V hardware platforms.
      </Translate>
    ),
  },
  {
    id: 4,
    title: (
      <Translate
        id="component.home.FeatureLeft.features.4"
        description="The fourth feature of Mobile Edition">
        PolyOS Mobile offers a virtual experimental platform for
        adapting to novel RISC-V hardware features and integrating
        emerging software ecosystems.
      </Translate>
    ),
  },
]
export default function FeatureLeft(): React.JSX.Element {
  return (
    <div className={clsx(styles.heroBanner)}>
      <div className={clsx('card', styles.feature)}>
        <div className="container">
          <h1 className={styles.title}>
            <Translate
              id="component.home.FeatureLeft.title"
              description="about PolyOS Mobile">
              PolyOS Mobile
            </Translate>
          </h1>
          <p className={styles.subtitle}>
            <ul>
              {items.map((item) => (
                <li key={item.id}>{item.title}</li>
              ))}
            </ul>
          </p>
          <div>
            <Link
              className={clsx(
                'button button--outline button--warning button--lg'
              )}
              to="/polyos-mobile">
              <Translate
                id="component.home.FeatureLeft.button.learnMore.text"
                description="homepage PolyOS Mobile get-started button">
                Learn more
              </Translate>
            </Link>
          </div>
        </div>
      </div>
    </div>
  )
}
